<template>
	<view class="container">
		<!-- 头部 -->
		<div class="top">
			<!-- 头像 -->
			<div class="icon"><u-icon name="bell" size="40"></u-icon></div>
			<div class="avatar" @click="toLogin">
				<u-avatar :src="src" ></u-avatar>
				<div class="message">
					<span class="name">五香卤蛋_AOT</span>
					<div class="phone">
						<u-icon name="phone" size="40"></u-icon>
					    <span>152****734</span>
					</div>
				</div>
			</div>
			<!-- 优惠券· -->
			<div class="information">
				<div class="infor">
					<div class="mation">
						<span class="mation_2">6</span>
						<span class="mation_1">优惠券</span>
					</div>
					<div class="mation">
						<span class="mation_2">0</span>
						<span class="mation_1">积分</span>
					</div>
					<div class="mation">
						<span class="mation_2">0.00</span>
						<span class="mation_1">余额.充值(元)</span>
					</div>
				</div>
				<!-- 会员 -->
				<div class="card">
						<u-icon name="integral" style="margin-left: 10rpx;"></u-icon>
						<span class="vip">开通绿卡会员，平均可省806/年</span>
						<div class="but">立即开通></div>
				</div>
			</div>
		</div>
		<!-- 订单 -->
		<div class="myOrder">
			<div class="allOrder">
				<span class="myOrd">我的订单</span>
			    <span class="allOrd">查看全部订单></span>
			</div>
			<div class="orderDetail">
				<div class="orderItem">
					<u-icon name="shopping-cart" size="60" color="#2C405A"></u-icon>
					<span>待支付</span>
				</div>
				<div class="orderItem">
					<u-icon name="car" size="60" color="#2C405A"></u-icon>
					<span>待收货</span>
				</div>
				<div class="orderItem">
					<u-icon name="email" size="60" color="#2C405A"></u-icon>
					<span>待评价</span>
				</div>
				<div class="orderItem">
					<u-icon name="red-packet" size="60" color="#2C405A"></u-icon>
					<span>售后/退款</span>
				</div>
			</div>
		</div>
		<div class="options">
			<div class="optionItem">
				<u-icon name="integral" size="60" color="#2C405A"></u-icon>
				<span class="option_text">绿卡会员</span>
			</div>
			<div class="optionItem">
				<u-icon name="map" size="60" color="#2C405A"></u-icon>
				<span class="option_text">收货地址</span>
			</div>
			<div class="optionItem">
				<u-icon name="gift" size="60" color="#2C405A"></u-icon>
				<span class="option_text">邀请有礼</span>
			</div>
			<div class="optionItem">
				<u-icon name="chat" size="60" color="#2C405A"></u-icon>
				<span class="option_text">联系客服</span>
			</div>
			<div class="optionItem">
				<u-icon name="calendar" size="60" color="#2C405A"></u-icon>
				<span class="option_text">礼品卡</span>
			</div>
			<div class="optionItem">
				<u-icon name="home-fill" size="60" color="#2C405A"></u-icon>
				<span class="option_text">企业采购</span>
			</div>
			<div class="optionItem">
				<u-icon name="server-man" size="60" color="#2C405A"></u-icon>
				<span class="option_text">叮咚招募</span>
			</div>
			<div class="optionItem">
				<u-icon name="coupon" size="60" color="#2C405A"></u-icon>
				<span class="option_text">意见反馈</span>
			</div>
			<div class="optionItem" @click="scanCode">
				<u-icon name="scan" size="60" color="#2C405A"></u-icon>
				<span class="option_text">扫一扫</span>
			</div>
			<div class="optionItem">
				<u-icon name="setting" size="60" color="#2C405A"></u-icon>
				<span class="option_text">设置</span>
			</div>
		</div>
		<guessLike></guessLike>
	</view>
</template>

<script>
	import guessLike from '../../components/guessLike.vue'
	export default {
		data() {
			return {
				src: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1180991607,2645758304&fm=26&gp=0.jpg'
			}
		},
		methods: {
			toLogin(){
				uni.navigateTo({
				    url: '../login/login'
				});
			},
			scanCode() {
			    let that = this;
			    // 允许从相机和相册扫码
			    uni.scanCode({
			        success: function(res) {
			        that.result1 = res.result;
			        }
			    });
			}
		},
		components:{
			"guessLike":guessLike
		}
	}
</script>

<style lang="scss">
.container{
	width: 100%;
	height: 100%;
	background-color: #fafafa;
	padding: 50rpx 30rpx;
	box-sizing: border-box;
}
// 头部

.icon{
	display: flex;
	justify-content: flex-end;
	margin-right: 50rpx;
}
.avatar{
	margin-top: 20rpx;
	display: flex;
	font-size: 24rpx;
	align-items: center;
	margin-left: 20rpx;
}
.name{
	font-size: 36rpx;
	font-weight: bold;
}
.message{
	margin-left: 30rpx;
}
.phone{
	margin-top: 10rpx;
	margin-left: -10rpx;
	
}
//优惠券
.information{
	margin-left: 20rpx;
	margin-right: 20rpx;
}
.infor{
	display: flex;
	justify-content: space-between;
	margin: 40rpx 50rpx 30rpx;
}
.mation{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.mation_2{
	font-size: 36rpx;
	font-weight: bold;
}
.mation_1{
	font-size: 32rpx;
	color: #8F8F94;
	margin-top: 10rpx;
}
//会员
.card{
	background-color: green;
	height: 100rpx;
	line-height: 100rpx;
	color: #fff;
	font-size: 28rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20rpx;
	border-radius: 30rpx;
}
.vip{
	margin-left: 10rpx;
}
.but{
	font-size: 28rpx;
	color: #333333;
	height: 30rpx;
	line-height: 30rpx;
	padding: 5rpx;
	background-color: #FCBD71;
	border-radius: 20rpx;
}

//订单
.myOrder{
	margin-top: 30rpx;
	background-color: #fff;
	padding: 40rpx 20rpx 30rpx;
	border-radius: 10rpx;
}
.myOrd{
	font-size: 36rpx;
}
.allOrd{
	float: right;
	font-size: 30rpx;
	color: #8F8F94;
}
.orderDetail{
	margin-top: 30rpx;
	display: flex;
	justify-content: space-between;
}
.orderItem{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.orderItem span{
	font-size: 30rpx;
	margin-top: 10rpx;
	color: #333;
}
//设置
.options{
	background-color: #fff;
	margin-top: 30rpx;
	display: flex;
	flex-wrap: wrap;
	padding-top: 20rpx;
	padding-bottom: 40rpx;
	border-radius: 10rpx;
}
.optionItem{
	width: 25%;
	margin-top: 30rpx;
	margin-bottom: 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.option_text{
	font-size: 30rpx;
	color: #333;
	margin-top: 30rpx;
}
</style>
